{% extends "publisher/_publisher_layout.html" %}

{% block meta_title %}
Choose username — Linux software in the Snap Store
{% endblock %}

{% block content %}

<section class="p-strip">
  <div class="row">
    <h1 class="p-heading--two">Choose a snap store username</h1>
    {% if error_list %}
      {% for error in error_list %}
        <div class="p-notification--negative">
          <p class="p-notification__response">
            {{ error.message|safe }}
          </p>
        </div>
      {% endfor %}
    {% endif %}
  </div>

  <div class="row">
    <form class="p-form p-form--stacked" method="POST" action="/account/username">
      <div class="p-form__group row">
        <div class="col-2">
          <label class="p-form__label" for="username">Username:</label>
        </div>
        <div class="col-6">
          <div class="p-form__control">
            <input name="username" id="username" type="text" value="{{ username }}" required pattern="^[a-z0-9]+[a-z0-9-]*[a-z0-9]+$">
            <p class="p-form-help-text">
              <b>This name will appear as the owner of any snaps you create and cannot be changed.</b><br class="u-no-margin--top" />
              Enter a value consisting of lower-case letters, numbers or hyphens.<br class="u-no-margin--top" />
              Hyphens cannot occur at the start or end of the chosen value.
            </p>
          </div>
        </div>
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
      </div>
      <div class="u-fixed-width">
        <hr />
      </div>
      <div class="u-fixed-width u-clearfix">
        <button class="p-button--possitive u-float-right" type="submit">Continue</button>
        <a class="p-button--neutral u-float-right" href="/">Cancel</a>
      </div>
    </form>
  </div>
</section>
{% endblock %}
